Добавление описания для пунктов меню в WordPress
Опубликовано: 09.03.2024
В некоторых премиум шаблонах WordPress есть для навигационного меню одна интересная опция — под названием пункта меню располагается 2-3слова краткого описания (см. иллюстрацию слева). Недавно пришлось разбираться с данный вопросом и я нашел одну статью по теме, перевод которой вам и предлагаю. Публикация о том, как реализовать подобное улучшенное меню для Wordpress.
Для вывода меню, созданного из админки WordPress, используется специальная функция wp_nav_menu . В итоге получаем код по типу этого:
| < ul id = "menu-main" > < li >< a href = "#" > Home </ a></ li > < li >< a href = "#" > About </ a></ li > < li >< a href = "#" > Contact </ a></ li > < li >< a href = "#" > Blog </ a></ li > </ ul > |
<ul id="menu-main"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Blog</a></li> </ul>
Как добавить в шапку сайта Wordpress номер телефона или контакты
Однако для добавления описаний в пункты меню нам нужен несколько иной HTML код, как минимум вот такой:
| < ul id = "menu-main" > < li >< a href = "#" >< strong > Home </ strong >< span > Starting the journey </ span ></ a></ li > < li >< a href = "#" >< strong > About </ strong >< span > What to expect </ span ></ a></ li > < li >< a href = "#" >< strong > Contact </ strong >< span > Get in touch !</ span ></ a></ li > < li >< a href = "#" >< strong > Blog </ strong >< span > Latest storys </ span ></ a></ li > </ ul > |
<ul id="menu-main"> <li><a href="#"><strong>Home</strong><span>Starting the journey</span></a></li> <li><a href="#"><strong>About</strong><span>What to expect</span></a></li> <li><a href="#"><strong>Contact</strong><span>Get in touch!</span></a></li> <li><a href="#"><strong>Blog</strong><span> Latest storys</span></a></li> </ul>